<template>
  <!-- 表格 -->
  <a-table
    :columns="columns"
    :data-source="props.courses"
    :bordered="true"
    :loading="props.loading"
    :pagination="false"
    :scroll="{ y: 'calc(100vh - 200px)' }"
    :row-selection="{ selectedRowKeys: selectedRowKeys, onChange: onSelectChange }"
    :row-key="record => record.courseId"
  >
    <template #bodyCell="{ column, text, record }">
      <template v-if="column.dataIndex === 'courseName'">
        <a @click="viewDetail(record)">{{ text }}</a>
      </template>
      <template v-else-if="column.dataIndex === 'courseStatus'">
        <span v-if="text === 0">
          <a-tag color="warning">未开课</a-tag>
        </span>
        <span v-else-if="text === 1">
          <a-tag color="processing">进行中</a-tag>
        </span>
        <span v-else="text === 2">
          <a-tag color="default">已结课</a-tag>
        </span>
      </template>
      <template v-else-if="column.dataIndex === 'projectList'">
        <div style="display: flex; flex-wrap: wrap; justify-content: space-around">
          <a
            v-for="project in record.projectList"
            @click="router.push({ name: '项目详情', params: { projectId: 67 } })"
            >{{ project.projectName }}</a
          >
        </div>
      </template>

      <template v-else-if="column.dataIndex === 'createTime'">
        <span>{{ dayjs(text).format('YYYY-MM-DD HH:mm:ss') }}</span>
      </template>

      <template v-else-if="column.dataIndex === 'action'">
        <a-space>
          <a @click="emit('edit-course', record)">编辑</a>
          <a-dropdown>
            <a class="ant-dropdown-link" @click.prevent>
              状态 <down-outlined />
            </a>
            <template #overlay>
              <a-menu @click="e => handleStatusChange(record, e.key)">
                <a-menu-item key="0">
                  <a-tag color="warning">未开课</a-tag>
                </a-menu-item>
                <a-menu-item key="1">
                  <a-tag color="processing">进行中</a-tag>
                </a-menu-item>
                <a-menu-item key="2">
                  <a-tag color="default">已结课</a-tag>
                </a-menu-item>
              </a-menu>
            </template>
          </a-dropdown>
          <a-popconfirm
            title="确定要删除这个课程吗？"
            ok-text="确定"
            cancel-text="取消"
            @confirm="emit('delete-course', record)"
          >
            <a style="color: #ff4d4f">删除</a>
          </a-popconfirm>
        </a-space>
      </template>
    </template>
  </a-table>
  
  <!-- 批量操作工具栏 -->
  <div v-if="selectedRowKeys.length > 0" class="batch-actions">
    <span>已选择 {{ selectedRowKeys.length }} 项</span>
    <a-space>
      <a-dropdown>
        <a-button>
          批量设置状态 <down-outlined />
        </a-button>
        <template #overlay>
          <a-menu @click="e => handleBatchStatusChange(e.key)">
            <a-menu-item key="0">
              <a-tag color="warning">未开课</a-tag>
            </a-menu-item>
            <a-menu-item key="1">
              <a-tag color="processing">进行中</a-tag>
            </a-menu-item>
            <a-menu-item key="2">
              <a-tag color="default">已结课</a-tag>
            </a-menu-item>
          </a-menu>
        </template>
      </a-dropdown>
      
      <a-popconfirm
        title="确定要删除选中的课程吗？"
        ok-text="确定"
        cancel-text="取消"
        @confirm="handleBatchDelete"
      >
        <a-button danger>批量删除</a-button>
      </a-popconfirm>
      
      <a-button @click="selectedRowKeys = []">取消选择</a-button>
    </a-space>
  </div>
</template>
<script lang="ts" setup>
import dayjs from 'dayjs';
import router from '@/router';
import { useStore } from 'vuex';
import { DownOutlined } from '@ant-design/icons-vue';
import { ref } from 'vue';

const store = useStore();

const emit = defineEmits([
  'edit-course', 
  'delete-course', 
  'status-change', 
  'batch-delete', 
  'batch-status-change'
]);

const props = defineProps({
  courses: {
    type: Array,
    default: null
  },
  loading: {
    type: Boolean,
    default: true
  }
});

//初始化表格数据类型
const columns = ref(null);
columns.value = [
  {
    title: '课程名称',
    dataIndex: 'courseName',
    align: 'center'
  },
  {
    title: '课程状态',
    dataIndex: 'courseStatus',
    align: 'center'
  },
  {
    title: '关联项目',
    dataIndex: 'projectList',
    align: 'center'
  },
  {
    title: '创建日期',
    dataIndex: 'createTime',
    align: 'center'
  },
  {
    title: '操作',
    dataIndex: 'action',
    align: 'center'
  }
];

//点击项目后进入项目页面
function viewDetail(record) {
  //存入store
  store.commit('course/SET_COURSEID', record.courseId);
  store.commit('course/SET_PROJECTS', record.projectList);
  store.commit('course/SET_TEACHERS', record.teacherList);
  router.push({ name: '课程详情', params: { courseId: record.courseId } });
}

// 处理状态变更
function handleStatusChange(record, statusKey) {
  emit('status-change', { courseId: record.courseId, status: Number(statusKey) });
}

// 批量选择相关
const selectedRowKeys = ref([]);

// 选择变更处理
const onSelectChange = (keys) => {
  selectedRowKeys.value = keys;
};

// 批量状态变更
const handleBatchStatusChange = (statusKey) => {
  emit('batch-status-change', { courseIds: selectedRowKeys.value, status: Number(statusKey) });
  selectedRowKeys.value = []; // 清空选择
};

// 批量删除
const handleBatchDelete = () => {
  emit('batch-delete', selectedRowKeys.value);
  selectedRowKeys.value = []; // 清空选择
};
</script>

<style scoped>
.ant-table-wrapper {
  position: relative;
  height: 100%;
}

.batch-actions {
  margin-top: 16px;
  padding: 8px;
  background: #f0f2f5;
  border-radius: 4px;
  display: flex;
  justify-content: space-between;
  align-items: center;
}
</style>
